<script setup>
import { ref, computed, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import * as XLSX from 'xlsx'; // 需要安装: npm install xlsx
import ip from '@/utils/baseURL.js';
import axios from 'axios';

// 玩家列表 - 添加新玩家
const players = ['何悦辉', '王宇航', '周宇豪', '黄俊凯', '周宇翔', '王彦凯', '张艺凡', '胡宇浩', '丁玉巍', '杨雨昊', '聂宇豪', '许文燊', '彭然'];

// 游戏记录数据
const gameRecords = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);

// 计算分页后的记录
const filteredRecords = computed(() => {
  const startIndex = (currentPage.value - 1) * pageSize.value;
  return gameRecords.value.slice(startIndex, startIndex + pageSize.value);
});

// 格式化日期函数
const formatDate = (timeArr) => {
  if (!timeArr || !Array.isArray(timeArr) || timeArr.length < 3) return '';
  const [year, month, day] = timeArr;
  return `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
};

// 格式化金额
const formatMoney = (amount) => {
  if (typeof amount === 'string') {
    return amount;
  }
  return amount.toLocaleString('zh-CN');
};

// 加载游戏记录
const loadGameRecords = async () => {
  try {
    const response = await axios.get(`${ip}/inter/dfw/getAll`);
    if (response.data.code === 200) {
      gameRecords.value = response.data.data.map(record => ({
        id: record.id,
        gameNumber: record.session,
        date: formatDate(record.time),
        winner: record.top,
        winAmount: record.topMoney,
        loser: record.last,
        loseAmount: record.lastMoney,
        remark: record.remark
      }));
    }
  } catch (error) {
    console.error('获取游戏记录失败:', error);
    ElMessage.error('获取数据失败');
  }
};

// 导出到Excel
const exportToExcel = () => {
  const exportData = gameRecords.value.map(record => ({
    '届次': record.gameNumber,
    '日期': record.date,
    '赢家': record.winner,
    '赢家资产': record.winAmount,
    '输家': record.loser,
    '输家资产': record.loseAmount,
    '备注': record.remark
  }));
  
  const workbook = XLSX.utils.book_new();
  const worksheet = XLSX.utils.json_to_sheet(exportData);
  XLSX.utils.book_append_sheet(workbook, worksheet, '大富翁游戏记录');
  const fileName = `大富翁游戏记录_${formatDate(new Date())}.xlsx`;
  XLSX.writeFile(workbook, fileName);
};

onMounted(() => {
  loadGameRecords();
});
</script>

<template>
  <div class="dfw-container">
    <div class="page-header">
      <h1>大富翁战力榜</h1>
      <div class="actions">
        <el-button type="success" @click="exportToExcel">导出Excel</el-button>
      </div>
    </div>

    <!-- 游戏记录表格 -->
    <div class="records-table">
      <el-table :data="filteredRecords" style="width: 100%" border stripe>
        <el-table-column prop="gameNumber" label="届次" width="80" sortable />
        <el-table-column prop="date" label="日期" width="120" sortable />
        <el-table-column prop="winner" label="Top" width="120">
          <template #default="scope">
            <span class="winner">{{ scope.row.winner }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="winAmount" label="最终资产" width="120">
          <template #default="scope">
            <span class="win-amount">{{ formatMoney(scope.row.winAmount) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="loser" label="Last" width="120">
          <template #default="scope">
            <span class="loser">{{ scope.row.loser }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="loseAmount" label="最终资产" width="120">
          <template #default="scope">
            <span class="lose-amount">{{ formatMoney(scope.row.loseAmount) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" min-width="150" />
      </el-table>
      
      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="gameRecords.length"
        />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.dfw-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    h1 {
      margin: 0;
      color: #333;
    }
    
    .actions {
      display: flex;
      gap: 10px;
    }
  }
  
  .records-table {
    margin-bottom: 30px;
    
    .winner {
      color: #67C23A;
      font-weight: bold;
    }
    
    .loser {
      color: #F56C6C;
      font-weight: bold;
    }
    
    .win-amount {
      color: #67C23A;
      font-weight: bold;
    }
    
    .lose-amount {
      color: #F56C6C;
      font-weight: bold;
    }
    
    .pagination {
      margin-top: 20px;
      text-align: right;
    }
  }
}
</style>
